<style>
    .plans .col-md-3 > h4 {
        height: 24px;
        font-size: 18px;
        color: #57576b;
        margin-top: 27px;
        text-align: left;
        margin-bottom: 7px;
    }

    .plans .dt-only .tip-price {
        padding-top: 6px;
        padding-bottom: 1px;
        margin-bottom: 0;
        line-height: 45px;
        margin-left: -15px;
    }
    .panel-body {
        padding: 15px;
        display: flex;
        flex-wrap: wrap;
    }
    .panel-body .col-md-5 {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .plans .col-md-3 > h6 {
        min-height: 38px;
    }

    .plans .col-md-3 > h6 {
        font-size: 14px;
        line-height: 19px;
        margin-top: 7px;
        text-align: left;
        color: #39394d;
        margin-bottom: 0;
    }

    .tip-price > span > a:link {
        font-size: 32px;
        text-decoration: none;
        color: #2d8cff;
    }

    .top-btn {
        text-align: left;
        margin-left: 35%;
        padding-bottom: 10px;
    }

    .cta-md {
        font-size: 15px;
        min-width: 30%;
    }

    .cta-bgyellow {
        background-color: #fff;
        color: #d14600!important;
        border: 1px solid #f26d21;
        font-weight: 700;
    }
    .cta-forbid {
        background-color: #fff;
        color: #cab5b5!important;
        border: 1px solid #cab5b5;
        font-weight: 700;
    }
    .cta-renew {
        background-color: #fff;
        color: #4bc800!important;
        border: 1px solid #4bc800;
        font-weight: 700;
    }

    .btn-cta, .btn-cta:focus, .btn-cta:hover, .btn-cta:active {
        border-radius: 3px;
        font-weight: 600;
        display: inline-block;
        text-decoration: none;
        margin-bottom: 15px;
        margin-left: 10px;
        margin-right: 10px;
        vertical-align: middle;
        padding: 0 12px;
        text-align: center;
        min-height: 45px;
        padding-top: 10px;
    }

    .plans .detail > p {
        line-height: 20px;
        position: relative;
    }
    .form-line{
        display: flex;
        flex-direction: row;
        line-height: 35px;
        margin-left: 20px;
    }
    .form-line input{
        margin-right: 5px;
    }
    .mini-span{
        width: 100px;
        float: left;
        background-color: #f2f2f2;
        margin: 4px 20px;
        border-radius: 4px;
        color: black;
        cursor: pointer;
    }
    .mini-span-active {
        width: 100px;
        float: left;
        background-color: #555555;
        margin: 3px 20px;
        border-radius: 4px;
        color: white;
        cursor: pointer;
    }
    .form-line-label{
        display: flex;
        height: 60px;
        flex-direction: column;
        align-items: start;
    }
    .form-line-label div{
        height: 20px;
    }
    .zheng-price{
        font-size: 12px;
        color: #dd6373;
        line-height: 25px;
    }
    .zheng-xiaoji{
        line-height: 20px;
        font-size: 12px;
    }
    .price-num{
        display: flex;
        flex-direction: row;
        margin-left: 18px;
    }
    .count-block{
        margin-left: 70px;
    }
    .count-block-1{
        border: 1px solid #e7eaed;
        height: 25px;
        line-height: 25px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 80px;
        border-radius: 3px;
    }
    .zheng-reduce{
        width: 25px;
        background-color: #f2f2f2;
        cursor: pointer;
    }
    .zheng-add{
        width: 25px;
        background-color: #f2f2f2;
        cursor: pointer;
    }
    .zheng-number{
        width: 30px;
    }
    .count-block-2{
        color: #dd6373;
        font-size: 12px;
    }
    .title-li{
        text-align: start;
        list-style-type: none;
    }
/*    .jifeizhouqi span:first-child{
        width: 100px;
        float: left;
        background-color: #555555;
        margin: 3px 20px;
        border-radius: 4px;
        color: white;
        cursor: pointer;
    }*/


</style>
<div class="panel panel-default panel-intro">
<!--    <div class="panel-heading">
        <ul class="nav nav-tabs" data-field="status">
            <li class="active">
                <a href="/admin/sponsor/sponsorbuy/personalIndex" style="cursor: pointer">我的计划</a>
            </li>
            <li >
                <a href="/admin/sponsor/sponsorbuy/buylist"  style="cursor: pointer">我的订单</a>
            </li>
        </ul>
    </div>-->

    <div class="panel-body">
        <div class="row animated fadeInRight">
            <div class="col-md-offset-1 col-md-10" style="margin-left: 10px;    width: auto">
                <div class="box box-primary" style="display: flex;flex-direction: column;">
                    <div class="panel-body plans" style=" display: flex;    flex-direction: row;    width: 1100px;">
                        <form id="update-form" role="form" data-toggle="validator" method="POST" action="/admin/sponsor.sponsorbuy/order">
                        <input type="hidden"  id="type" name="type" value="{$type}">
                            <div class="col-md-5 " id="pal-57" style="border: #dcdcdc  solid 1px;border-right: #dcdcdc  solid 1px;border-radius:6px;width: 650px;margin: 0 20px;text-align: center">
                            <div style="display: flex;flex-direction: column;padding: 15px 0; ">
                                <div style="padding-top: 10px;font-weight: bold">{$type==1?'个人版':''}{$type==2?'高级版':''}{$type==3?'商业版':''}{$type==4?'企业版':''} </div>
                                <div style="padding-top: 10px;font-weight: bold">
                                    <ul>
                                        <li class="title-li">支持1个活动</li>
                                        <li class="title-li">活动中最多容纳{$r.zuigao}人同时参与</li>
                                        <li class="title-li">购买后赠送{$r.freeHours}小时的免费流量</li>
                                        <li class="title-li">单个活动最长举行时长为{$r.dange}分钟。</li>
                                    </ul>
                                </div>
                            </div>

                            <div class="form-group form-line" style="margin-top: 25px; margin-bottom: 25px;">
                                <label for="email" class="control-label">计费周期:</label>
                                <div style="margin-left: 40px;">
                                    <p class="jifeizhouqi">
                                        {eq name="$r.iMonthFee" value="1" }
                                        <span class="mini-span " type="1">
                                            <input type="hidden" id="monthFee" name="monthFee"  value="{$r.monthFee}" >
                                            <span style="font-size: 20px">{$r.monthFee}</span>元/月
                                        </span>
                                        {/eq}
                                        {eq name="$r.iQuarterFee" value="1" }
                                        <span  class="mini-span" type="2">
                                            <input type="hidden" id="quarterFee"  name="quarterFee"    value="{$r.quarterFee}" >
                                            <span style="font-size: 20px">{$r.quarterFee}</span>元/季
                                        </span>
                                        {/eq}
                                        {eq name="$r.iYearFee" value="1" }
                                        <span  class="mini-span" type="3">
                                            <input type="hidden" id="yearFee"  name="yearFee"    value="{$r.yearFee}" >
                                            <span style="font-size: 20px">{$r.yearFee}</span>元/年
                                        </span>
                                        {/eq}
                                    </p>
                                    <p>
                                        <input type="hidden" id="jifeiType" name="jifeiType" value="1">
                                        <input type="hidden" id="jifeiPrice" class="jifee" name="jifeiPrice" value="{$r.monthFee}">
                                    </p>
                                </div>
                            </div>

                            <div class="form-group form-line" style="flex-direction: column;">
                                <div class="form-line-label">
                                    <div>
                                        <span><input type="checkbox" name="row[iLiuliangPrice]" id="iLiuliangPrice"  {$r.iLiuliangPrice==1?'checked':''} value="1" ></span>
                                        <label for="email" class="control-label">流量充值:</label>
                                    </div>
                                    <div style="font-size: 8px;margin-left: 20px;">
                                        一个人参加活动1小时则消耗1小时流量
                                    </div>
                                </div>
                                <div class="price-num" {$r.iLiuliangPrice==1?'':'style="display:none"'}>
                                    <div class="right-price-box">
                                        <div class="zheng-price"><span class="pUnit">{$r.liuliangPrice}</span>元/小时/人</div>
                                        <div class="zheng-xiaoji">小计
                                            <span class="zheng-xiaoji-total">{$r.liuliangPrice*$r.liuliangNum|number_format=2}</span>元/月
                                            <input type="hidden"  class="unitNumber" name="liuliangNumber" value="{$r.liuliangNum}">
                                            <input type="hidden"   class="unitPrice jifee" name="liuliangPrice" value="{$r.liuliangPrice*$r.liuliangNum}">
                                        </div>
                                    </div>
                                    <div class="count-block">
                                         <div class="count-block-1">
                                             <div  class="zheng-reduce"> -  </div>
                                             <div class="zheng-number">{$r.liuliangNum}</div>
                                             <div  class="zheng-add"> + </div>
                                         </div>
                                         <div class="count-block-2">
                                             起购数量为{$r.liuliangNum}
                                         </div>
                                     </div>
                                </div>
                            </div>

                            <div style="border-bottom:1px solid #CCC;margin-left: 20px;">&nbsp;</div>
                            <div class="form-group form-line" style="margin: 20px 0 20px 20px;" >
                                <div class="form-line-label">
                                    <div>
                                        <label for="email" class="control-label">总计:</label>
                                    </div>
                                </div>
                                <div class="price-numT" style="margin-left:180px " >
                                    <div class="right-price-box">
                                        <div class="zheng-price" style="font-size: 16px;font-weight: bold;">
                                            <span class="total-fee">{$r.liuliangPrice+$r.monthFee|number_format=2}</span>元
                                            <input type="hidden" id="totalFee"  name="totalFee" value=""  >
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group" style="text-align: center;margin-top: 10px;margin-bottom: 30px;">
                                <a href="/admin/sponsor/sponsorbuy/personalindex">
                                    <button type="button" class="btn btn-default" style="width: 100px;">取消</button>
                                </a>
                                <button type="submit" class="btn btn-success" style="background-color: cornflowerblue;margin-left: 20px;width: 100px;">提交订单</button>
                            </div>
                    </div>
                        </form>
                </div>
            </div>
        </div>
    </div>
</div>
</div>